<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">

    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        nav a, footer a {
            color: white;
            height: 40px;
            line-height: 40px;
            text-decoration: none;
        }
        li {
            list-style: none;
        }
        nav a:hover,footer a:hover{
            color: red;
        }
        img {
            display: inline-block;
        }
        h3 {
            margin: 5px 0;
        }
        em {
            color: red;
            font-style: normal;
        }
        strong{
            color: red;
        }


    </style>
</head>
<body>
<!--色号:#20c997-->
<!--导航栏-->
<nav style="background-color: #20c997;height: 40px;text-align: center;">
    <div style="float: left;margin-left: 20px">
        <a style="margin-left: 10px;" href="#">关于我们</a>
        <a style="margin-left: 10px;" href="#">联系客服</a>
        <a style="margin-left: 10px;" id="recharge" href="#">充值</a>
        <a style="margin-left: 10px;" id="price" href="#">优惠券</a>
    </div>
    <span>
        <img th:src="@{/img/nav.png}" alt="">
    </span>

    <div style="float: right;margin-right: 20px;">
        <img th:src="@{/img/nav1.png}" alt="" height="20" style="margin-left: 20px">
        <a href="#" >登录注册</a>
        <img th:src="@{/img/nav2.png}" alt="" height="20" style="margin-left: 20px;">
        <a href="#">购物车</a>
        <img th:src="@{/img/nav3.png}" alt="" height="20" style="margin-left: 20px;">
        <a href="#">个人中心</a>
    </div>
</nav>
<!--充值-->
<div id="topUP" style="width: 500px;position:fixed !important;z-index: 9999;right: 500px;top: 200px;display: none">
    <div style="width: 500px;height: 300px;background-color: #d9ffe0;position: relative;">
        <button id="del" style="position: absolute;top: 10px;right: 20px;font-size: 24px;background-color:#d9ffe0;">x</button>
        <p style="margin: 10px;height: 30px;line-height: 30px;">充值</p>
        <p style="margin: 10px;height: 30px;line-height: 30px;">总计 (CNY) : <strong>0.00</strong></p>
        <div style="background-color: white;width: 90%;margin-left: 10px;padding: 5px;font-size: 20px;border-radius: 10px;">
            <p style="margin: 10px;height: 30px;line-height: 30px;">充值金额</p>
            ￥<input type="text" style="border: none;font-size: 20px;">
            <div style="height: 20px;"></div>
        </div>
        <div style="width: 200px;padding:8px;border-radius: 10px;background-color:#4ecac5;position: absolute;bottom: 50px;left: 50%;text-align: center;margin-left: -100px;color: white;">立即支付</div>
    </div>
</div>
<!--红包卡券-->
<div id="discount" style="width: 500px;display:none;background-color:#ffefca;border: 1px solid #ffefca;position:fixed !important;z-index: 9999;right: 500px;top: 100px;">
    <div style="margin: 20px;">
        <div>红包卡券</div>
        <button id="del2" style="position: absolute;top: 10px;right: 20px;font-size: 24px;background-color:#ffefca;">x</button>
        <ul>
            <li style="width: 80%;margin: 10px auto;height: 100px;">
                <div style="float: left">
                    <img th:src="@{/img/discount1.png}" alt="" height="100">
                    <span>x2</span>
                </div>

                <div style="width: 100px;float:right;padding:4px;border-radius: 5px;background-color:red;text-align: center;color: white;margin-top: 30px;">立即使用</div>
            </li>
            <li style="width: 80%;margin: 10px auto;height: 100px;">
                <div style="float: left">
                    <img th:src="@{/img/discount2.png}" alt="" height="100">
                    <span>x1</span>
                </div>

                <div style="width: 100px;float:right;padding:4px;border-radius: 5px;background-color:red;text-align: center;color: white;margin-top: 30px;">立即使用</div>
            </li>
            <li style="width: 80%;margin: 10px auto;height: 100px;">
                <div style="float: left">
                    <img th:src="@{/img/discount3.png}" alt="" height="100">
                    <span>x2</span>
                </div>

                <div style="width: 100px;float:right;padding:4px;border-radius: 5px;background-color:red;text-align: center;color: white;margin-top: 30px;">立即使用</div>
            </li>
            <li style="width: 80%;margin: 10px auto;height: 100px;">
                <div style="float: left">
                    <img th:src="@{/img/discount4.png}" alt="" height="100">
                    <span>x5</span>
                </div>

                <div style="width: 100px;float:right;padding:4px;border-radius: 5px;background-color:red;text-align: center;color: white;margin-top: 30px;">立即使用</div>
            </li>
        </ul>
    </div>

</div>
<!--搜索栏-->
<div style="width: 100%;float: left;">
    <!--    搜索框-->
    <div style="width: 1000px;height: 80px;margin: auto;">
        <div class="search" style="margin-left: 200px;">
            <form th:action="@{/user/search}">
            <input name="name" type="text" placeholder="请输入药品名称" class="search_input" autocomplete="off">
            <input type="submit"  class="search-button" value="搜索">
            </form>
        </div>
    </div>
</div>

<div>
    <section style="width: 80%;margin: auto;">
        <div style="margin-top: 20px;">
            <span style="font-size: 32px;color:#20c997; " th:text="${name}"></span>
        </div>
        <div style="margin-top: 20px;">
            <div th:each="medicine:${medicines}" style="width:250px;display:inline-block;margin-left: 50px;">
                <a th:href="@{/user/purchase(name=${medicine.getName()})}">
                    <img th:src="@{/img/p02.jpg}" alt="" width="250">
                    <div style="text-align: center;">
                        <h3 th:text="${medicine.getName()}"></h3>
                        <div><em>￥</em><strong th:text="${medicine.getPrice()}"></strong></div>
                    </div>
                </a>
            </div>
        </div>
    </section>
</div>


<!--底部-->
<footer style="background-color: #20c997;height: 40px;text-align: center;position: fixed;bottom: 0;width: 100%;">
    <img th:src="@{/img/foot1.png}" alt="" height="20" style="margin-left: 20px">
    <a href="#" >健康好质量</a>
    <img th:src="@{/img/foot2.png}" alt="" height="20" style="margin-left: 20px;">
    <a href="#">无理由退换货</a>
    <img th:src="@{/img/foot3.png}" alt="" height="20" style="margin-left: 20px;">
    <a href="#">安全可保证</a>
    <img th:src="@{/img/foot4.png}" alt="" height="20" style="margin-left: 20px;">
    <a href="#">全国配送</a>
</footer>

<script>
    $(function () {
        $("#recharge").click(function () {
            $("#topUP").css("display","block");
            return false;
        });
        $("#price").click(function () {
            $("#discount").css("display","block");
            return false;
        });
        $("#del").click(function () {
            $("#topUP").css("display","none");
        });
        $("#del2").click(function () {
            $("#discount").css("display","none");
        });
    });
</script>
</body>
</html>